import DavidTable from '@/components/form/table/DavidTable';
import {guid, isEmpty, mergeObject} from '@/utils/CommonUtils';

let index = 0;
let count = 0;
let SubTable = {
  title: '明细表',
  name: 'SubTable',
  getLabel() {
    return <div data-role="icon" data-is-layout="true" data-component="SubTable"
                className="design-table-label">明细表</div>;
  },
  getBody(fieldId) {
    return $(`<div data-is-layout="true" data-role="block" class="drag-block" data-component="SubTable" id="${fieldId}">明细表 ${index++}</div>`)[0];
  },
  bind(container, config) {
    let id = $(container).attr("id");
    config = this.resolveDefaultConfig(config);
    let subTable = new DavidTable(id, config);
    subTable.initSubTableContents();

    let temp = this.createDragBars();
    $(container).append(temp);
    this.bindBars(id, subTable);
  },
  createDragBars() {
    let barContainer = $(`<div class="drag-bar-container"></div>`);
    let bars = this.createBars();
    barContainer.append(bars);
    return barContainer;
  },
  createBars() {
    let moveBar = $(`<div class="drag-move-bar"><i class="el-icon" data-v-ea893728="" style="font-size: 20px;"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m186.496 544 41.408 41.344a32 32 0 1 1-45.248 45.312l-96-96a32 32 0 0 1 0-45.312l96-96a32 32 0 1 1 45.248 45.312L186.496 480h290.816V186.432l-41.472 41.472a32 32 0 1 1-45.248-45.184l96-96.128a32 32 0 0 1 45.312 0l96 96.064a32 32 0 0 1-45.248 45.184l-41.344-41.28V480H832l-41.344-41.344a32 32 0 0 1 45.248-45.312l96 96a32 32 0 0 1 0 45.312l-96 96a32 32 0 0 1-45.248-45.312L832 544H541.312v293.44l41.344-41.28a32 32 0 1 1 45.248 45.248l-96 96a32 32 0 0 1-45.312 0l-96-96a32 32 0 1 1 45.312-45.248l41.408 41.408V544H186.496z"></path></svg></i></div>`);
    let removeBar = $(`<div class="drag-delete-bar"><i class="el-icon" data-v-ea893728="" style="font-size: 20px;"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M352 192V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64H96a32 32 0 0 1 0-64h256zm64 0h192v-64H416v64zM192 960a32 32 0 0 1-32-32V256h704v672a32 32 0 0 1-32 32H192zm224-192a32 32 0 0 0 32-32V416a32 32 0 0 0-64 0v320a32 32 0 0 0 32 32zm192 0a32 32 0 0 0 32-32V416a32 32 0 0 0-64 0v320a32 32 0 0 0 32 32z"></path></svg></i></div>`);
    let expandWidth = $(`<div class="expand-width-bar designer-component-icon"><svg t="1691625534650" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3996" width="20" height="20"><path d="M180 176h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zM904 176h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zM785.3 504.3L657.7 403.6c-4.7-3.7-11.7-0.4-11.7 5.7V476H378v-62.8c0-6-7-9.4-11.7-5.7L238.7 508.3c-3.7 2.9-3.7 8.5 0 11.3l127.5 100.8c4.7 3.7 11.7 0.4 11.7-5.7V548h268v62.8c0 6 7 9.4 11.7 5.7l127.5-100.8c3.8-2.9 3.8-8.5 0.2-11.4z" p-id="3997"></path></svg></div>`);
    return [expandWidth, moveBar, removeBar];
  },
  createFieldConfig(subTableId) {
    return {
      id: subTableId,
      formName: 'formson_' + guid(),
      showName: "明细表" + ++count,
      tableName: undefined,
      fields: [],
    };
  },
  bindWithElement(container, config) {
    let id = $(container).attr("id");
    config = this.resolveDefaultConfig(config);

    let table = new DavidTable(id, {
      onlyBind: true,
      ...config
    });
    this.bindBars(id, table);
    table.refreshWidthKeepPercent();
  },
  getDefaultConfig() {
    return {
      row: 3,
      col: 6,
    };
  },
  resolveDefaultConfig(config) {
    if (isEmpty(config)) config = {};
    let defaultConfig = this.getDefaultConfig();
    return mergeObject(config, defaultConfig);
  },
  bindWidthFormDefinition(parentEle, subFormDefinition) {
    let col = 6;
    if (subFormDefinition.fields && subFormDefinition.fields.length >= 1) {
      col = subFormDefinition.fields.length + 1;
    }
    let subTable = new DavidTable(subFormDefinition.id, {onlyBind: false, row: 3, col});
    subTable.initSubTableContents();
    subTable.SubTablefieldComponents(subFormDefinition);

    let temp = this.createDragBars();
    $(parentEle).append(temp);
    this.bindBars(subFormDefinition.id, subTable);
  },
  bindBars(id, table) {
    $(`#${id} .expand-width-bar`).off('click').on('click', e => {
      table.refreshWidthKeepPercent();
    });
  },
};

export default SubTable;
